<template>
  <div class="nav">
    <el-menu :default-active="$store.state.defaultActive"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b">
      <li v-for="(item,index) in navList"
          :key="index">
        <div v-if="item.children">
          <el-submenu :index="`${index+1}`">
            <template slot="title">
              <span v-if="item.icon">
                <i :class="item.icon"></i>
              </span>
              <span>{{item.name}} </span>
            </template>
            <div v-if="item.children">
              <el-submenu v-for="(ite,inde) in item.children"
                          :key="inde"
                          :index="`${(index+1)}`+`${(inde+1)}`">
                <template slot="title">
                  <span v-if="ite.icon">
                    <i :class="ite.icon"></i>
                  </span>
                  {{ite.name}}
                </template>
                <div v-if="ite.children">
                  <el-menu-item :index="`${(index+1)}`+`${(inde+1)}`+`${(ind+1)}`"
                                v-for="(it,ind) in ite.children"
                                :key="ind"
                                @click="go(it.path)">
                    <span v-if="it.icon">
                      <i :class="it.icon"></i>
                    </span>
                    {{it.name}}
                  </el-menu-item>
                </div>

              </el-submenu>
            </div>
            <div v-else>
              <el-menu-item :index="`${index+1}`"
                            @click="go(`${item.path}`)">
                <span v-if="item.icon">
                  <i :class="item.icon"></i>
                </span>
                <span slot="title">{{item.name}}</span>
              </el-menu-item>
            </div>
          </el-submenu>
        </div>
        <div v-else>
          <el-menu-item :index="`${index+1}`"
                        @click="go(`${item.path}`)">
            <span v-if="item.icon">
              <i :class="item.icon"></i>
            </span>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </div>
      </li>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navList: [{
        name: '统计',
        path: '',
        // icon: 'iconfont icon-home'
      }, {
        name: '主页',
        path: 'home',
        // icon: 'iconfont icon-home'
      }, {
        name: '百度',
        path: 'baidu',
        // icon: 'iconfont icon-home'
      }, {
        name: '特效',
        path: 'SpecialEffects',
        // icon: 'iconfont icon-texiao',
        children: [{
          name: '滑动',
          path: 'Slide',
          // icon: 'iconfont icon-erjicaidan-shubiaohuadong',
          children: [
            {
              name: '向左滑动',
              path: 'LeftSlide',
              // icon: 'iconfont icon-iconset0321',
            },
            {
              name: '向右滑动',
              path: 'RightSlide',
              // icon: 'iconfont icon-iconset0322',
            },
            {
              name: '动画专题',
              path: 'TopSlide',
              // icon: 'iconfont icon-iconset0322',
            }
          ]
        }, {
          name: '加载动画',
          path: 'loading',
        }]
      }],
    }
  },
  methods: {
    handleClose () { },
    handleOpen () { },
    // 查找路径
    findPath (obj, path) {
      let arrPath = []//保存路径
      let count = 0
      function deepFinds (node, target) {
        if (node.path) arrPath.push(node.path)
        if (node.path === target) {
          count++
        }
        if (node.children) {
          for (let i = 0; i < node.children.length; i++) {
            let flag = deepFinds(node.children[i], target)
            if (!flag)
              arrPath.pop()
            else
              break
          }

        }
        return count > 0
      }
      deepFinds(obj, path)
      return arrPath
    },
    go (path) {
      let arr = {};
      arr.children = this.navList;
      let arrPath = this.findPath(arr, path)
      window.localStorage.setItem('arrPath', JSON.stringify(arrPath))
      this.$router.push('/' + arrPath.join('/'))
    }
  },
  mounted () {
    // 刷新页面记录导航
    if (window.localStorage.getItem('arrPath')) {
      var pathArr = JSON.parse(window.localStorage.getItem('arrPath'))
      var pathActive = find(this.navList, pathArr).join('')
      this.$store.commit('defaultActiveChange', pathActive)
    }
  },
}

// 记录下标
function find (node, target) {
  var arr = []
  var num = -1
  var fn = function (nodes, targets, count) {
    count++
    nodes.forEach((e, i) => {
      if (targets[count] == e.path) {
        arr.push(i + 1)
        if (e.children) {
          fn(e.children, targets, count)
        } else {
          return arr;
        }
      }
    })
  }
  fn(node, target, num)
  return arr;
}

</script>
<style lang="less" scoped>
.nav {
  width: 20%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #000;
  background: #545c64;
}
/deep/ .el-menu {
  border: none;
  .is-active {
    .el-submenu__title {
      color: #ffd04b !important;
      .iconfont {
        color: #ffd04b !important;
      }
    }
  }
}
</style>